import React, { useEffect, useRef, useState } from 'react';
import { queryQuizList } from './service';
import type { ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Card, Descriptions, message } from 'antd';
import { AUTH_TOKEN } from '@/utils/request';
import { baseUrl } from '@/utils/httpUrl';

const TableList: React.FC<{}> = (props: any) => {
  const { activityId, itemId, stepId } = props.params;
  const { uid } = props
  const actionRef = useRef<ActionType>();
  const [info, setInfo] = useState<any>({})
  const columns: any = [

    {
      title: '用户ID',
      dataIndex: 'uid',
      hideInSearch: true
    },
    {
      title: '用户昵称',
      dataIndex: 'nickname',
      hideInSearch: true
    },
    {
      title: '真实姓名',
      dataIndex: 'name',
      hideInSearch: true
    },
    {
      title: '手机号',
      dataIndex: 'mobile',
      hideInSearch: true
    },
    {
      title: '班级',
      dataIndex: 'className',
      hideInSearch: true
    },
    {
      title: '辅导老师',
      dataIndex: 'assistTeacherName',
      hideInSearch: true
    },

    {
      title: '作答次数',
      dataIndex: 'answerNum',
      hideInSearch: true
    },
    {
      title: '练习题得钻',
      dataIndex: 'crystal',
      hideInSearch: true
    },
    {
      title: '练习题（首次）',
      dataIndex: 'exercisesFirstScore',
      hideInSearch: true
    },
    {
      title: '练习题（末次）',
      dataIndex: 'exercisesEndScore',
      hideInSearch: true
    },
    {
      title: '操作',
      dataIndex: 'gamePaperStatus',
      hideInSearch: true,
      render: (val, recore) => {
        const authToken = encodeURIComponent(localStorage.getItem('token') ?? '');
        return !recore.gamePaperStatus ?
          '-' :
          recore.gamePaperStatus === 1 ?
            <a onClick={() => { message.error('用户正在作答，请稍后查看最新的试卷') }}>查看试卷</a> :
            <a target="_blank" href={`/?scene=course_test_view&token=${authToken}&uid=${recore.uid}&stepId=${recore.stepId}`} rel="noreferrer">查看试卷</a>
      }
    },
  ]
  useEffect(() => {
    actionRef.current?.reload()
  }, [uid, stepId])
  return (

    <ProTable<any>
      rowKey="id"
      search={
        false
      }
      actionRef={actionRef}
      tableExtraRender={() => (
        <Card>
          <Descriptions size="small" column={2}>
            <Descriptions.Item label="条目ID">{info.itemId}</Descriptions.Item>
            <Descriptions.Item label="条目名称">{info.name}</Descriptions.Item>
            <Descriptions.Item label="条目开始时间">{info.startTime}</Descriptions.Item>
          </Descriptions>
        </Card>
      )}
      request={async (params: any) => {

        const res = await queryQuizList({
          ...params,
          pageNum: params.current,
          activityId,
          itemId,
          searchParam: uid,
          stepId
        });
        setInfo(res.data)
        return {
          data: res.data.userList,
          success: true,
          total: res.data.count,
        };
      }}
      columns={columns}



    />
  );
};

export default TableList;
